
<template>
  <AdminLayout
    ref="adminLayout"
    v-if="$route.meta.layout && $route.meta.layout == 'admin'"
  >
    <router-view class="router-view" v-slot="{ Component }">
      <keep-alive v-if="pageKeepAlive == 1">
        <component :is="Component" />
      </keep-alive>
      <component :is="Component" v-else />
    </router-view>
  </AdminLayout>
  <router-view class="router-view" v-else></router-view>
</template>

<script>
import { useStore } from "vuex";
import { defineComponent, computed, watch } from "vue";
import useWindowSize from "@/hooks/useWindowSize";

export default defineComponent({  // 定义组件
  name: "App",
  setup() {  // setup函数
    const store = useStore();   // 获取store
    console.warn("store", store.state);   // 获取store中的数据
    const { clientWidth, clientHeight } = useWindowSize();  // 获取窗口大小
    clientWidth.value <= 750 && store.commit("app/SET_DEVICE", "mobile");   // 初始化设备类型
    clientWidth.value > 750 && store.commit("app/SET_DEVICE", "desktop");   // 初始化设备类型
    watch([clientWidth, clientHeight], (newVal) => {   // 监听窗口变化
      newVal[0] <= 750 && store.commit("app/SET_DEVICE", "mobile");  // 切换设备类型
      newVal[0] > 750 && store.commit("app/SET_DEVICE", "desktop");  // 切换设备类型
      store.commit("app/SET_WINDOW_RECT", {   // 设置窗口宽高
        clientWidth: newVal[0],   // 设置窗口宽度
        clientHeight: newVal[1],  // 设置窗口高度
      });
    });
    return {
      pageKeepAlive: computed(() => store.state.app.pageKeepAlive),
    };
  },
});
</script>

